import {connect} from "react-redux"
import {toggleTodo} from "../actions"
import TodoList from "../components/ToDoPage/ToDoList"
const getVisibleTodos =(todos,filter)=>{
    switch (filter) {
        case "SHOW_COMPLETED":
            return todos.filter((item)=>item.completed)
        case "SHOW_ACTIVE":
            return todos.filter(t=>!t.completed)
        case "SHOW_ALL" :
        default:
            return todos
    }
};
const mapStateToProp = state => {
    return {
        todos:getVisibleTodos(state.todos,state.visibilityFilter)
    }
};
const mapDispatchToProps = dispatch=>{
    return {
         onTodoClick:id=>{
             dispatch(toggleTodo(id))
         }
    }
};
const VisibleTodoList = connect(
    mapStateToProp,
    mapDispatchToProps
)(TodoList)

export default VisibleTodoList
